<template>
    <view class="content">
        <image class="_bg" src="../../static/img/bg3.png" mode="aspectFill"></image>
		<view class="_label_top">
			<image class="_btn_top" src="../../static/img/kjg.png"></image>
			<label class="_lab_top">{{text}}</label>
		</view>
		<view  class="_bg_middle">
			<text class="_middle_title">
				{{middleTitle}}
			</text>
			<text class="_middle_page">
				{{middlePage}}
			</text>
			<text class="_middle_tost">
				{{middleTost}}
			</text>
			<m-card @click="tapSelect" :cardList="cardList"/>
		</view>
		<view class="_next">
			<mBtnCs class="_lbtn" text="确定"  @click="tapNext"/>
		</view>
		<cmd-bottom-nav @click="tapNav"  border-color="#BC1BBE" background-color="#BC1BBE" font-color="#fff" active-font-color="#fff"></cmd-bottom-nav>
    </view>
</template>

<script>
	import cmdBottomNav from "@/components/cmd-bottom-nav/cmd-bottom-nav.vue"
	import mbtn from "@/components/m-btn-type/m-btn.vue"
	import mtabbar from "@/components/m-tabbar/m-tabbar.vue"
	import mCard from "@/components/m-card/m-card.vue"
	import mBtnCs from '@/components/m-btn/m-btn-cs.vue'
    export default {
		components:{mbtn,mtabbar,cmdBottomNav,mBtnCs,mCard},
		data(){
			return{
				text:'请从1-10里选择一个数字',
				middleTitle:'过去的状况',
				middlePage:'3/3',
				middleTost:'摒弃杂念选择一个数字',
				cardList:[
					{
						defaultCard:'../../static/img/card_def_one.png',
						activeCard:'../../static/img/card_act_one.png'
					},{
						defaultCard:'../../static/img/card_def_two.png',
						activeCard:'../../static/img/card_act_two.png'
					},{
						defaultCard:'../../static/img/card_def_three.png',
						activeCard:'../../static/img/card_act_three.png'
					},{
						defaultCard:'../../static/img/card_def_four.png',
						activeCard:'../../static/img/card_act_four.png'
					},{
						defaultCard:'../../static/img/card_def_five.png',
						activeCard:'../../static/img/card_act_five.png'
					},{
						defaultCard:'../../static/img/card_def_six.png',
						activeCard:'../../static/img/card_act_six.png'
					},{
						defaultCard:'../../static/img/card_def_seven.png',
						activeCard:'../../static/img/card_act_seven.png'
					},{
						defaultCard:'../../static/img/card_def_et.png',
						activeCard:'../../static/img/card_act_et.png'
					},{
						defaultCard:'../../static/img/card_def_nin.png',
						activeCard:'../../static/img/card_act_nin.png'
					},{
						defaultCard:'../../static/img/card_def_ten.png',
						activeCard:'../../static/img/card_act_ten.png'
					}
				]
			}
		},
        onLoad() {
        },
		methods:{
			tapNav(e){
				let that = this
				let path = e.item.pagePath
				uni.switchTab({
					url:path,
					success: (res) => {
						clearInterval(that.timer)
					},
					complete: (com) => {
					}
				})
			},
			tapSelect(e){
				console.log(e)
			},
			tapNext(){
				uni.redirectTo({
					url: '/pages/card/main_card',
					success: res => {
						console.log('选择第二阶段卡牌...')
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
		
    }
</script>

<style lang="scss">
	.content{
		padding: 0upx;
		height:100%;
		
		
		._bg{
			width: 100%;
			height:100%;
			vertical-align: top;
			top: 0;
			right: 0;
			position:absolute;
			vertical-align: middle;
		}
		
		._label_top{
			display:flex;
			width:100%;
			top:25upx;
			height:auto;
			position:relative;
			justify-content:center;

			._btn_top{
				height:185upx;
				width: 50%;
			}
			
			._lab_top{
				z-index:3;
				color:white;
				width:30%;
				text-align:center;
				justify-content:center;
				align-items:center;
				position:absolute;
				display:flex;
				margin:auto;
				height:100%;
			}
		}
		
		._bg_middle{
			width:100%;
			height:20%;
			position:absolute;
			z-index:7;
			margin:auto;
			justify-content:center;
			vertical-align:middle;
			align-items:center;
			display:flex;
			margin-top:125rpx;
			color: white;
			
			._middle_title{
				font-size:13pt;
				width:100%;
				position:absolute;
				margin-top:1rpx;
				text-align:center;
			}
			._middle_page{
				width:100%;
				position:absolute;
				font-size:9pt;
				margin-top:40rpx;
				text-align:center;
			}
			._middle_tost{
				width:100%;
				position:absolute;
				font-size:8pt;
				margin-top:80rpx;
				text-align:center;
				display:inline-block;
			}
			
			m-card{
				width:100%;
			}
		}
		
		._next{
			width:50%;
			margin:auto;
			margin-top:105%;
			position:relative;
			
			._tost{
				color:white;
				font-size:8pt;
				text-align:center;
				position:relative;
				display:flex;
				margin-top:25upx;
			}
		}
	}
</style>
